<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奶瓶演示</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="bottle-container dark" id="app">
    <div class="theme-switch">
      <button class="active" data-theme="dark" style="background-color: #333; color: #fff;">深色</button>
      <button data-theme="pink" style="background-color: #ff69b4; color: #fff;">粉色</button>
      <button data-theme="blue" style="background-color: #4285f4; color: #fff;">蓝色</button>
      <button data-theme="green" style="background-color: #34a853; color: #fff;">绿色</button>
      <button data-theme="purple" style="background-color: #9c27b0; color: #fff;">紫色</button>
      <button data-theme="orange" style="background-color: #ff9800; color: #fff;">橙色</button>
    </div>
    <div class="svg-bottle-wrapper" id="bottleWrapper">
      <svg class="bottle-svg" viewBox="-76 0 292 292" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <!-- 粉色渐变 -->
          <linearGradient id="bottleGradient-dark" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#444" />
            <stop offset="100%" stop-color="#222" />
          </linearGradient>
          <linearGradient id="milkGradient-dark" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#fff" />
            <stop offset="100%" stop-color="#bbb" />
          </linearGradient>
          <radialGradient id="highlightGradient-dark" cx="50%" cy="20%" r="80%">
            <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          
          <linearGradient id="bottleGradient-pink" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#fff0f5" />
            <stop offset="100%" stop-color="#ffb6c1" />
          </linearGradient>
          <linearGradient id="milkGradient-pink" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#fff0f5" />
            <stop offset="100%" stop-color="#ffb6c1" />
          </linearGradient>
          <radialGradient id="highlightGradient-pink" cx="50%" cy="20%" r="80%">
            <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          
          <linearGradient id="bottleGradient-blue" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#e3f2fd" />
            <stop offset="100%" stop-color="#90caf9" />
          </linearGradient>
          <linearGradient id="milkGradient-blue" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#e3f2fd" />
            <stop offset="100%" stop-color="#90caf9" />
          </linearGradient>
          <radialGradient id="highlightGradient-blue" cx="50%" cy="20%" r="80%">
            <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          
          <linearGradient id="bottleGradient-green" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#e8f5e8" />
            <stop offset="100%" stop-color="#81c784" />
          </linearGradient>
          <linearGradient id="milkGradient-green" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#e8f5e8" />
            <stop offset="100%" stop-color="#81c784" />
          </linearGradient>
          <radialGradient id="highlightGradient-green" cx="50%" cy="20%" r="80%">
            <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          
          <linearGradient id="bottleGradient-purple" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#f3e5f5" />
            <stop offset="100%" stop-color="#ce93d8" />
          </linearGradient>
          <linearGradient id="milkGradient-purple" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#f3e5f5" />
            <stop offset="100%" stop-color="#ce93d8" />
          </linearGradient>
          <radialGradient id="highlightGradient-purple" cx="50%" cy="20%" r="80%">
            <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          
          <linearGradient id="bottleGradient-orange" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#fff8e1" />
            <stop offset="100%" stop-color="#ffcc02" />
          </linearGradient>
          <linearGradient id="milkGradient-orange" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#fff8e1" />
            <stop offset="100%" stop-color="#ffcc02" />
          </linearGradient>
          <radialGradient id="highlightGradient-orange" cx="50%" cy="20%" r="80%">
            <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          
          <clipPath id="bottleClip">
            <path d="M16.257,281.456a28.754,28.754,0,0,1-12.648-17.82c-1.788-7.126-1.109-17.568-.5-31.019.835-18.431,3.947-79.695,4.527-93.677A43.578,43.578,0,0,1,10.9,124.505a25.89,25.89,0,0,1,5.664-8.6l.032-.028a28.34,28.34,0,0,0,7.61,2.365,272.855,272.855,0,0,0,45.4,3.4,272.233,272.233,0,0,0,45.749-3.459,23.016,23.016,0,0,0,8.171-2.3.3.3,0,0,1,.032.024,25.89,25.89,0,0,1,5.664,8.6,43.554,43.554,0,0,1,3.265,14.435c.58,13.982,3.692,75.246,4.527,93.677.609,13.451,1.288,23.893-.5,31.019-2.606,10.391-9.1,16.89-19.125,21.292-13.28,3.817-28.787,4.779-47.783,4.779-18.249,0-34.711-.962-46.224-4.5A44.77,44.77,0,0,1,16.257,281.456Z" />
          </clipPath>
        </defs>
        <!-- 奶液层 -->
        <path id="milkWavePath" fill="url(#milkGradient-dark)" clip-path="url(#bottleClip)" />
        <!-- 奶液波浪高光 -->
        <path id="milkWaveHighlightPath" fill="url(#highlightGradient-dark)" clip-path="url(#bottleClip)" style="pointer-events:none;" />
        <!-- 瓶身描边 -->
        <path class="a" d="M45.074,46.263a103.671,103.671,0,0,0-9.862,5.923c-8.244,5.894-14.28,14.585-9.875,27.821A274.584,274.584,0,0,0,69.6,83.226a275.573,275.573,0,0,0,44.268-3.212c4.4-13.241-1.632-21.933-9.877-27.828C95.482,46.1,84.69,42.911,83.987,36.72L83.946,18c-.008-3.7-.914-8.174-3.262-11.034C78.587,4.417,74.1,2.359,69.6,2.359S60.617,4.417,58.52,6.97C56.172,9.83,55.266,14.3,55.258,18L55.217,36.72C54.777,40.6,50.385,43.294,45.074,46.263Z" fill="none" stroke="#fff" stroke-width="5" />
        <path class="a" d="M16.257,281.456a28.754,28.754,0,0,1-12.648-17.82c-1.788-7.126-1.109-17.568-.5-31.019.835-18.431,3.947-79.695,4.527-93.677A43.578,43.578,0,0,1,10.9,124.505a25.89,25.89,0,0,1,5.664-8.6l.032-.028a28.34,28.34,0,0,0,7.61,2.365,272.855,272.855,0,0,0,45.4,3.4,272.233,272.233,0,0,0,45.749-3.459,23.016,23.016,0,0,0,8.171-2.3.3.3,0,0,1,.032.024,25.89,25.89,0,0,1,5.664,8.6,43.554,43.554,0,0,1,3.265,14.435c.58,13.982,3.692,75.246,4.527,93.677.609,13.451,1.288,23.893-.5,31.019-2.606,10.391-9.1,16.89-19.125,21.292-13.28,3.817-28.787,4.779-47.783,4.779-18.249,0-34.711-.962-46.224-4.5A44.77,44.77,0,0,1,16.257,281.456Z" fill="none" stroke="#fff" stroke-width="5" />
        <path class="c" d="M116.056,79.793q-.384-.021-.77-.015A272.409,272.409,0,0,1,69.6,83.226,270.53,270.53,0,0,1,24.07,79.785a11.85,11.85,0,0,0-8.707,4.6c-2.536,3.371-3.292,7.722-3.835,11.9a69.32,69.32,0,0,0-.829,10.972c-.053,2.419,2.538,6.516,4.089,7.556,2.709,1.817,5.437,2.631,9.418,3.429a272.868,272.868,0,0,0,45.4,3.4,272.233,272.233,0,0,0,45.749-3.459,21.633,21.633,0,0,0,9.981-3.371c1.55-1.04,4.141-5.137,4.088-7.556a69.32,69.32,0,0,0-.829-10.972c-.543-4.182-1.3-8.533-3.835-11.9A11.817,11.817,0,0,0,116.056,79.793Z" fill="none" stroke="#fff" stroke-width="5" />
        <!-- 刻度线 -->
        <g id="scaleMarks">
          <!-- 刻度线将在JS中动态生成 -->
        </g>
        <!-- 投影 -->
        <ellipse cx="70" cy="290" rx="60" ry="10" fill="#000" opacity="0.18" />
      </svg>
      <!-- 奶量数字 -->
      <div class="milk-amount-below" id="milkAmountDisplay">
        <span class="milk-amount-main">100</span>
        <span class="milk-amount-unit">ml</span>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html> 